<template>
    <div style="width: 100%;height: 100%;">
      
        <div class="custLeft">
          <div
            style="
              width: 100%;
              height: 100%;
              margin: 10px, 10px, 10px, 10px;
              display: flex;
            "
          >
            <!-- <div style="width: 100%;height: 5%"> <h3>基本设置</h3></div> -->
            <div style="width: 50%; height: 100%">
              <Row>
                <Col span="24" style="margin-top: 10px; padding-left: 10px"
                  ><h2>基本设置</h2></Col
                >
                <Col span="24" style="margin-top: 40px; padding-left: 10px"
                  ><h4>用户名</h4></Col
                >
                <Col span="24" style="margin-top: 10px; padding-left: 10px">
                  <Input v-model="user.nickname" type="text" />
                </Col>
                <Col span="24" style="margin-top: 40px; padding-left: 10px"
                  ><h4>姓名</h4></Col
                >
                <Col span="24" style="margin-top: 10px; padding-left: 10px">
                  <Input v-model="user.name" type="text" />
                </Col>
                <Col span="24" style="margin-top: 40px; padding-left: 10px"
                  ><h4>性别</h4></Col
                >
                <Col span="24" style="margin-top: 10px; padding-left: 10px">
                  <Input v-model="user.sex" type="text" />
                </Col>
                <Col span="24" style="margin-top: 40px; padding-left: 10px"
                  ><h4>联系电话</h4></Col
                >
                <Col span="24" style="margin-top: 10px; padding-left: 10px">
                  <Input v-model="user.phoneNum" type="text" />
                </Col>
                <Col span="12" style="margin-top: 40px; padding-left: 10px">
                  <Button type="success" @click="changeMessage()"
                    >保存信息</Button
                  >
                </Col>
              </Row>
            </div>
            <div style="width: 50%; height: 100%">
              <Row>
                <Col span="24" style="margin-left: 60px">
                  <img
                    :src="user.headUrl"
                    alt="头像"
                    style="
                      width: 200px;
                      height: 200px;
                      border-radius: 100px;
                      margin-top: 100px;
                    "
                  />
                </Col>
                <Col span="24" style="margin-left: 90px; margin-top: 40px">
                  <Button
                    icon="ios-download-outline"
                    @click="centerDialogVisible = true"
                    >上传头像</Button
                  >
                </Col>
              </Row>
            </div>
          </div>
      </div>
      <el-dialog
        title="请上传用户头像"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <div>
          <el-upload
            :action="useOss ? dataObj.host : minioUploadUrl"
            :data="useOss ? dataObj : null"
            list-type="picture-card"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            :on-preview="handlePreview"
            :limit="maxCount"
            :on-exceed="handleExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </template>
  <script>
  import axios from "axios";
  export default {
    name: "multiUpload",
    props: {
      value: {
        type: Array,
        default: () => {
          return [];
        },
      },
      maxCount: {
        type: Number,
        default: 5,
      },
    },
    data() {
      return {
        dataObj: {
          policy: "",
          signature: "",
          key: "",
          ossaccessKeyId: "",
          dir: "",
          host: "",
        },
        dialogVisible: false,
        dialogImageUrl: null,
        useOss: true, //使用oss->true;使用MinIO->false
        minioUploadUrl: "http://localhost:8081/minio/upload",
        centerDialogVisible: false,
        user: {
          name: "",
          userfalseName: "",
          sex: "",
          phone: "",
          headImg: "",
        },
        TzMessage: "", //帖子的详细信息
        TzTitle: "", //帖子的标题
        TzImgUrl: "", //帖子图片路径
        productImgUrl: "", //产品的图片路径
        productMessage: "", //产品的详细信息
        productMoney: "", //产品的价格
        productType: "", //产品的种类
        ProductTitle: "", //产品的标题
        typeList: [
          {
            value: "0",
            label: "女装/女包/女鞋",
          },
          {
            value: "1",
            label: "美妆/饰品/洗护",
          },
          {
            value: "2",
            label: "男装/背包/男鞋",
          },
          {
            value: "3",
            label: "手机/数码/礼物",
          },
          {
            value: "4",
            label: "食品/生鲜/进口",
          },
          {
            value: "5",
            label: "书本/其他/服务",
          },
          {
            value: "6",
            label: "家装/电器/药品",
          },
        ],
        typeModel: "",
        imageUrl: "",
        uploadUrl: "src/upLoadImg",
        isLoggedIn: false, //用户是否登录
        count: 0, //倒计时 计数器
        LoginOrRegster: true,
        userName: "", //用户账号
        passWord: "", //账号密码
        value1: false,
        value2: false,
        styles: {
          height: "calc(100% - 55px)",
          overflow: "auto",
          paddingBottom: "53px",
          position: "static",
        },
        formData: {
          name: "",
          url: "",
          owner: "",
          type: "",
          approver: "",
          date: "",
          desc: "",
        },
      };
    },
    watch: {
      isLoggedIn(login) {
        localStorage.setItem("isLoggedIn", login);
      },
    },
    computed: {
      fileList() {
        let fileList = [];
        for (let i = 0; i < this.value.length; i++) {
          fileList.push({ url: this.value[i] });
        }
        return fileList;
      },
    },
    created() {
      const savedUser = localStorage.getItem("user");
      if (savedUser) {
        this.user = JSON.parse(savedUser);
        this.isLoggedIn = true;
      }
      const isLoggedIn = localStorage.getItem("isLoggedIn");
      if (isLoggedIn) {
        this.isLoggedIn = true;
      }
    },
    methods: {
      //图片上传逻辑
      emitInput(fileList) {
        let value = [];
        for (let i = 0; i < fileList.length; i++) {
          value.push(fileList[i].url);
        }
        this.$emit("input", value);
      },
      handleRemove(file, fileList) {
        console.log(file);
        this.emitInput(fileList);
      },
      handlePreview(file) {
        this.dialogVisible = true;
        this.dialogImageUrl = file.url;
        console.log(this.dialogImageUrl);
      },
      beforeUpload(file) {
        console.log(file);
        if (!this.useOss) {
          //不使用oss不需要获取策略
          return true;
        }
        return new Promise((resolve, reject) => {
          let _self = this;
          console.log(1111);
          axios
            .get("http://localhost:8081/aliyun/oss/policy")
            .then((response) => {
              _self.dataObj.policy = response.data.data.policy;
              _self.dataObj.signature = response.data.data.signature;
              _self.dataObj.ossaccessKeyId = response.data.data.accessKeyId;
              _self.dataObj.key = response.data.data.dir + "/${filename}";
              _self.dataObj.dir = response.data.data.dir;
              _self.dataObj.host = response.data.data.host;
              resolve(true);
            })
            .catch((err) => {
              console.log(err);
              reject(false);
            });
        });
      },
      handleUploadSuccess(res, file) {
        console.log("上传成功");
        let url = this.dataObj.host + "/" + this.dataObj.dir + "/" + file.name;
        console.log(url);
        this.user.headUrl = url;
        if (!this.useOss) {
          console.log(res.data, 11111);
          //不使用oss直接获取图片路径
          url = res.data.url;
          console.log(url);
        }
        this.fileList.push({ name: file.name, url: url });
        this.emitInput(this.fileList);
      },
      handleExceed(files, fileList) {
        console.log(files);
        console.log(fileList);
        this.$message({
          message: "最多只能上传" + this.maxCount + "张图片",
          type: "warning",
          duration: 1000,
        });
      },
      changeLogin() {
        this.isLoggedIn = false;
      },
      changeMessage() {
        console.log(this.$store.state.username);
        axios
          .post("http://localhost:8081/salvage/students/updateStudentInfo", {
            studentId:this.user.studentId,
            username: this.user.username,
            name: this.user.name,
            nickname: this.user.nickname,
            sex: this.user.sex,
            phoneNum: this.user.phoneNum,
            headUrl: this.user.headUrl, //头像路径
          })
          .then((response) => {
            if (response.data.code == "00000") {
              this.$Message.info(response.data.message);
            } else {
              this.$Message.info(response.data.message);
            }
          });
      },
      //上传帖子
      updataTiZi() {
        this.value1 = false;
        axios.post("http://localhost:8081/salvage/students/login", {
          username: this.$store.state.username, //账号
          //    headImg: this.user.headImg,//上传者头像路径
          headImg: "", //上传者头像路径
          nickname: this.$store.state.userfalseName, //上传者的昵称
          cardTitle: this.TzTitle, //帖子的标题
          cardMessage: this.TzMessage, //帖子的内容
          //cardImgUrl:this.TzImgUrl//帖子图片的路径
          cardImgUrl: "", //帖子图片的路径
          //建表添加俩个：1评论，2是否通过管理员审核
        });
      },
      //上传商品
      updataProduct() {
        this.value2 = false;
        axios.post("http://localhost:8081/salvage/products/addProduct", {
          studentId: this.$store.state.id, //用户唯一标识
          title: this.ProductTitle, //产品的标题
          description: this.productMessage, //产品的内容
          price: this.productMoney, //产品的价格
          productType: this.typeModel, //产品的类型（0，1，2，3，4，5，6）
          status: 1, //商品是否上架（0代表下架，1代表上架）
          adminStatus:1,//0审核中，1审核通过
      imgInfosBOs: [
          {
              imgType: "3",
              relateId: "",
              imgUrl: "",
              remarks:this.user.headImg
          }
      ]
        });
      },
      //注册用户页面
      goToRegister() {
        axios
          .post("http://localhost:8081/salvage/students/register", {
            username: this.userName,
            password: this.passWord,
          })
          .then((response) => {
            if (response.data.code == "00000") {
              this.$Message.info("正在注册中，注册完成自动返回登录页面");
              this.gotoLogin();
            } else {
              this.$Message.info("该用户已存在");
            }
          });
      },
      //返回登录页面
      gotoLogin() {
        this.LoginOrRegster = true;
      },
    },
  };
  </script>
  
  
  <style scoped>
  .custLeft {
    width: 40%;
    height: 100%;
    /* position: fixed; */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
    /* background-image: url(../assets/hua.png); */
  }
  /* .custRight{
      width: 60%;
      height: 100%;
      display: flex;
      background: #d2d2d2;
      justify-content: center;
      align-items: center;
  } */
  .login-right-bg {
    position: fixed;
    top: 50%;
    margin-top: -300px;
    right: 0;
    width: 420px;
    min-width: 330px;
    min-height: 200px;
    /* background: #fff; */
    z-index: 100;
  }
  .login-right-main {
    margin: 143px 20px 0 20px;
    padding: 10px 20px;
    width: 340px;
    height: 245px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    z-index: 100;
  }
  .login-right-top {
    line-height: 55px;
    text-align: center;
    font-size: 18px;
    color: #333;
    font-weight: 500;
  }
  .login-con {
    position: relative;
    margin-top: 10px;
  }
  .login-con-nums {
    height: 59px;
    border-bottom: 1px solid #dedede;
  }
  .icon-account {
    position: absolute;
    display: block;
  }
  .form-control {
    margin-left: 40px;
    width: 65%;
    height: 100%;
    line-height: 59px;
    outline: none;
    color: #333333;
    font-size: 14px;
    border: none;
  }
  .login-con-nums {
    height: 59px;
    border-bottom: 1px solid #dedede;
  }
  .icon-password {
    position: absolute;
    display: block;
  }
  .remember {
    position: relative;
    margin-top: 10px;
    padding-left: 11px;
    height: 20px;
    line-height: 20px;
    color: #666;
    font-size: 14px;
  }
  .remember-me {
    padding-left: 20px;
    cursor: pointer;
  }
  .lost-pwd {
    float: right;
    cursor: pointer;
  }
  .login-btn {
    margin: 20px 20px 0 20px;
    height: 46px;
    text-align: center;
    line-height: 46px;
    color: #fff;
    font-size: 16px;
    border-radius: 4px;
    background: #09adf1;
    cursor: pointer;
    width: 340px;
  }
  .custMessage {
    position: fixed;
    top: 50%;
    margin-top: -300px;
    right: 0;
    width: 420px;
    min-width: 330px;
    min-height: 200px;
    background: #a7a3a3;
    z-index: 100;
  }
  .headContain {
    width: 100%;
    /* height: 240px; */
    display: flex;
    /* background: #000; */
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .headContain-one {
    width: 100%;
    /* height: 240px; */
    display: flex;
    margin-left: 10%;
    margin-top: 10px;
    /* background: #000; */
    /* justify-content: center;
      align-items: center; */
  }
  .headContain-two {
    width: 100%;
    height: 493px;
    display: flex;
    background: #ffffff;
    justify-content: center;
    /* align-items: center; */
    border-radius: 15px;
    margin-top: 10px;
  }
  </style>
  